<html>
<head>
<title>16 CH</title>
<link rel="shortcut icon" href="image/favicon.ico"> 
<link href="jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1; no-cache" >
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
<script src="tooltip.en.js" type="text/javascript"></script>
<STYLE>
.flash{margin:5px 5px 5px 5px;}
.box
{
	border:1px solid #aaaaaa;
	position:absolute;
	background:#ffffff;
	left:-1024px;
	top:-1024px;
}
.boxNull
{
	border:1px solid #aaaaaa;
	position:absolute;
	background:#e0e0e0;
	left:-1024px;
	top:-1024px;
}
</STYLE>
<SCRIPT>
var strType="DVRWeb";
var strType1="Voice";
var strBtnNameSel = "";
var strCamNameSel = "";
var strPTZBtnName = "";
var bConnect    = 0;
var bXHP  = 0;
var btnCam1n, btnCam2n, btnCam3n, btnCam4n, btnCam5n, btnCam6n, btnCam7n, btnCam8n;
var btnCam9n, btnCam10n, btnCam11n, btnCam12n, btnCam13n, btnCam14n, btnCam15n, btnCam16n;
var btnCam1d, btnCam2d, btnCam3d, btnCam4d, btnCam5d, btnCam6d, btnCam7d, btnCam8d;
var btnCam9d, btnCam10d, btnCam11d, btnCam12d, btnCam13d, btnCam14d, btnCam15d, btnCam16d;
var btnPTZ1n, btnPTZ2n, btnPTZ3n, btnPTZ4n, btnPTZ5n, btnPTZ6n, bfntnPTZ7n, btnPTZ8n;
var btnPTZ9n, btnPTZ10n, btnPTZ11n, btnPTZ12n, btnPTZ13n, btnPTZ14n, btnPTZ15n, btnPTZ16n;
var btnPTZ1d, btnPTZ2d, btnPTZ3d, btnPTZ4d, btnPTZ5d, btnPTZ6d, btnPTZ7d, btnPTZ8d;
var btnPTZd, btnPTZ10d, btnPTZ11d, btnPTZ12d, btnPTZ13d, btnPTZ14d, btnPTZ15d, btnPTZ16d;
var btnConnect1n, btnConnect1d; 
var btnRec1n, btnRec1d; 
var btnLoopPage1n, btnLoopPage1d; 
var btnVoice1n, btnVoice1d, btnAudio1n, btnAudio1d; 
var btn1W1n, btn1W1d, btn4W1n, btn4W1d, btn9W1n, btn9W1d, btn16W1n, btn16W1d;
var btnXHPn, btnXHPd;
var btnXHP1n, btnXHP1d;
var nScreenLayout = 0;
var stridpw  = "Uguest_Pguest";
var stridpw1 = "guest guest";
var selWin1;
var nCount, nCount1;
var bSuccessed;
var bLoop = 0;
var bVoice = 0;
var bAudio = 0;

var csplits = 0;
var maxWidth = 800;
var maxHeight = 600;
var xStart=0;
var yStart=0;
var splitStart = 1;
var nScreenLayout = 0;
var bConnect    = 0;
var ConnectionType = 0;
var nLoopDuration = 5000;
var InternetType = 0;
var bSuccessed;
var IP;
var Port;
var nCamSelNo = 0;
var cmdServer;
var keyPressed = 0;
var canPTZ;
var timerID = 0;
var ptzbtnName="PTZ1";
var ptzcmd="UP";
var isPlaying = new Array(17);
var portsAry = new Array(3);
var isFullScreen = 0;
var theDialog;

function i2s(i)
{
	if ((1<=i) && (i<=9))
		return '00'+i+' ';
	else
		return '0'+i+' ';
}

function FullScreen()
{
	if (isFullScreen == 0) {
		isFullScreen = 1;
	}
	else{
		isFullScreen = 0;
	}
}
function portsLoaded()
{
	var ary = ports.split(' ');
	portsAry[1] = ary[0];
	portsAry[2] = ary[1];
}

function loadScript(url, id, callback)
{
	var scriptElement = document.createElement('script');
	scriptElement.type = 'text/javascript';
	scriptElement.src  = url;
	scriptElement.id   = id;
	if (typeof scriptElement.addEventListener != 'undefined') {
		scriptElement.addEventListener('load',function(evt){callback();},false);
		}
	else
	if (typeof scriptElement.attachEvent != 'undefined') {
		scriptElement.attachEvent('onreadystatechange',function(){
			s=scriptElement.readyState;
			if ((s=='loaded') || (s=='complete'))
				callback();
		});
	}
	document.getElementsByTagName('head')[0].appendChild(scriptElement);
}

function onConnectCam() 
{
	if (strBtnNameSel == "") {
		Halert(501);
		return;
	} 
	var options = '<br /><select id="cameras">';
	var baseStr = '<div><label>Username</label><br /><input type="text" id="username" value="" class="text ui-widget-content ui-corner-all" /><br /><br /><label>Password</label><br /><input type="password" id="password" value="" class="text ui-widget-content ui-corner-all" /><br /><input id="gcheck" type="checkbox" />Guest Login<br /><br /><br /><select id="band"><option value=18082>High Speed (18082)</option><option value=18083>Low Speed (18083)</option></select>';
    for (i=1; i<=16; i++) {
		options = options + '<option value='+i+'>Camera '+i+'</option>';
	}
	options = options + '<option value=0>__________________</option>';
	theDialog = $(baseStr+options+'</select></div>');
	
    if (navigator.appName != "Microsoft Internet Explorer")
	    h = 320;
	else
		h = '100%';
	theDialog.dialog({
		autoOpen: false,
		title: 'Login',
		modal: true,
		width: 220,
		height: h,
		closeOnEscape: true,
		clsoeText: 'show',
		buttons: {
			"OK": function() {
				stridpw = 'U'+trim($('#username').val())+'_P'+trim($('#password').val());
				stridpw1= trim($('#username').val())+' '+trim($('#password').val());
				if ($('#gcheck').attr("checked")) {
					stridpw = "Uguest_Pguest";
					stridpw1= "guest guest";
				}
				else
				if (stridpw == "U_P") {
					stridpw = "Uguest_Pguest";
					stridpw1= "guest guest";
				}
				else
				if (stridpw.indexOf('U_P') >= 0)
					return;
				Port = $('#band').val();
				if (Port == 18082) {
					if (portsAry[1] > 0)
						Port = portsAry[1];
				}
				else
				if (Port == 18083) {
					if (portsAry[2] > 0)
						Port = portsAry[2];
				}
				cno = $('#cameras').val();
				$(this).dialog("close");
				doDisconnectCam(strCamNameSel, 0);
				IP = window.location.host.split(':')[0];
				if (cno > 0) {
					cmdServer.SetVariable("method:commandConnect", IP+":"+Port);
					doConnectCam(strCamNameSel, cno);
					bConnect = 1;
					document.mConnect.src = btnConnect1d.src;
				}
				$(this).remove();
			}
		}
	});
	theDialog.dialog('open');
}

function onDisconnectCam() 
{
	var i, strCam, bHit;
	if (strBtnNameSel == "") {
		Halert(501);
		return;
	} 
	if (bAudio) {
	}
	doDisconnectCam(strCamNameSel, 0);
	for (i=1; i<=16; i++) {
		 if (isPlaying[i]) {
			return;
		 }
	}
	bConnect = 0;
	document.mConnect.src = btnConnect1n.src;
}

function InitWebcam()
{
    var i, strCam, strString;
    bOpened = 0;
	
	portsAry[1] = 0;
	portsAry[2] = 0;
	strString = tooltip.n509;
	for (i=1; i<=16; i++){
		strCam = "mbtnCam" + i;
		if (document[strCam] != null)
			document[strCam].alt  = strString;
		isPlaying[i] = false;	
	}
	strString = tooltip.n527;
	for (i=9; i<=16; i++){
		strCam = "PTZ" + i;
		if (document[strCam] != null)
			document[strCam].alt  = strString;
	}
	document.PTZ1.alt = tooltip.n515;
	document.PTZ2.alt = tooltip.n516;
	document.PTZ3.alt = tooltip.n514;
	document.PTZ4.alt = tooltip.n517;
	document.PTZ5.alt = tooltip.n518;
	document.PTZ6.alt = tooltip.n519;
	document.PTZ7.alt = tooltip.n520;
	document.PTZ8.alt = tooltip.n521;
	document.mConnectCamera.alt = tooltip.n534;
	document.mDisconnectCamera.alt = tooltip.n535;
	document.mConnect.alt = tooltip.n513;
	document.m1W.alt = tooltip.n528;
	document.m4W.alt = tooltip.n529;
	document.m9W.alt = tooltip.n530;
	document.m16W.alt = tooltip.n531;
	document.mLoopPage.alt = tooltip.n533;
	document.mPage.alt = tooltip.n532;
	document.m4W.src = btn4W1d.src;	
}

function Halert(nMsgID)
{
	alert(eval('tooltip.n'+nMsgID));
}

function onPTZTimeOut()
{
  if(timerID)
  {
    onPTZ(ptzbtnName, ptzcmd);
    clearTimeout(timerID);
    timerID=0;
    timerID=setTimeout("onPTZTimeOut()",500);
  }    
}

function onPTZMouseDown(btnName, command)
{
  if (! keyPressed) {
      keyPressed = 1;
      ptzbtnName=btnName;
      ptzcmd=command;
      canPTZ=0;
      onPTZ(ptzbtnName, ptzcmd);
      if (canPTZ>0) 
          timerID=setTimeout("onPTZTimeOut()",1000);
  }
}

function onPTZMouseUp()
{
  keyPressed = 0;
  timerID=clearTimeout(timerID);
  timerID=0;  
}

function onPTZ(btnName, command) 
{
	if (strBtnNameSel != ""){ 
	    c = i2s(strCamNameSel.substr(5,2)); 
		cmdServer.SetVariable("method:commandSend", c+command + " 0 " + stridpw1+'\r\n'+c+'^'+stridpw1+'\r\n');
		if (strPTZBtnName != "")
			document[strPTZBtnName].src =  eval("btn" + strPTZBtnName +"n.src");	
		strPTZBtnName = btnName;
		document[strPTZBtnName].src =  eval("btn" + strPTZBtnName +"d.src");
		canPTZ=1;
	}
	else
		Halert(501);
}

function calcMax()
{
	xs = document.getElementById("pool").clientWidth;
	ys = document.getElementById("pool").clientHeight;
	if (xs > 700 && ys > 540) {
		xs = xs - 40;
		ys = ys - 40;
		var h2 = (xs * 4 / 5);
		if (h2 <= ys) {
			maxHeight = h2;
			maxWidth  = xs;
		}
		else{
			maxWidth  = ys * 5 / 4;
			maxHeight = ys;
		}
		xStart = 20 + (xs-maxWidth) / 2;
		yStart = 20 + (ys-maxHeight) / 2;
	}
	else{   // min size
		maxWidth  = 660;
		maxHeight = 500;
		$('#pooldiv').css("width",maxWidth).css("height",maxHeight);		
		xStart = 0 + (xs-maxWidth)  / 2;
		yStart = 0 + (ys-maxHeight) / 2;
	}
}

function changeSplits(splits)
{
	if (csplits != splits) {
		var n = Math.sqrt(splits);
		var w = Math.floor((maxWidth-10*n) / n);
		var w1= w+10;
		var h = Math.floor((maxHeight-10*n) / n);
		var h1= h+10;
		var x = xStart;
		var y = yStart;
		var csplitStart = 1;
		if (nCamSelNo > 0)
		    csplitStart = Math.floor((nCamSelNo-1)/splits)*splits+1;
		for (i=splitStart; i<csplitStart; i++) {
			$('#playr'+i).css("left",-2024).css("top",-2024).css("width",0).css("height",0);		
			if (i <= 16) $('#flash'+i).css("width",w).css("height",h);
		}
		for (i=csplitStart; i<csplitStart+splits; i++) {
			if (i <= 16)
				$('#flash'+i).css("width",w).css("height",h);
			$('#playr'+i).css("left",x).css("top",y).css("width",w1).css("height",h1);
			x += w1;
			if ((x+w1) > (xStart+maxWidth)) {
				x = xStart;
				y += h1;
			}
		}
		splitStart = csplitStart;
		for (i=splitStart+splits; i<=18; i++){
			$('#playr'+i).css("left",-2024).css("top",-2024).css("width",0).css("height",0);
			if (i <= 16) $('#flash'+i).css("width",w).css("height",h);
		}
	}
	csplits = splits;	
}

function resizeSplits(splits)
{
	var n = Math.sqrt(splits);
	var w = Math.floor((maxWidth-10*n) / n);
	var w1= w+10;
	var h = Math.floor((maxHeight-10*n) / n);
	var h1= h+10;
	var x = xStart;
	var y = yStart;
	for (i=splitStart; i<(splitStart+splits); i++) {
		$('#playr'+i).css("left",x).css("top",y).css("width",w1).css("height",h1);
		if (i <= 16) $('#flash'+i).css("width",w).css("height",h);
		x += w1;
		if ((x+w1) > (xStart+maxWidth)) {
			x = xStart;
			y += h1;
		}
	}
}

function nextPage(inc)
{
	if (csplits == 16) return;
	var n = Math.sqrt(csplits);
	var w = Math.floor((maxWidth-10*n) / n);
	var w1= w+10;
	var h = Math.floor((maxHeight-10*n) / n);
	var h1= h+10;
	var x = xStart;
	var y = yStart;

	for (i=splitStart; i<(splitStart+csplits); i++) {
		$('#playr'+i).css("left",-1024).css("top",-1024).css("width",0).css("height",0);		
	}
	splitStart += csplits;
	if (splitStart > 16)
	    splitStart = 1;	
	for (i=splitStart; i<(splitStart+csplits); i++) {
		$('#playr'+i).css("left",x).css("top",y).css("width",w1).css("height",h1);
		if (i <= 16) $('#flash'+i).css("width",w).css("height",h);
		x += w1;
		if ((x+w1) > (xStart+maxWidth)) {
			x = xStart;
			y += h1;
		}
	}
}

function SetscreenLayout(nLayout)
{
	if (nScreenLayout != 0) {
		eval("document.m" + nScreenLayout + "W.src = btn" + nScreenLayout + "W1n.src");
  		if (nScreenLayout == 1)
			changeSplits(1);
		else
		if (nScreenLayout == 4)
			changeSplits(4);
		else
		if (nScreenLayout == 9)
			changeSplits(9);
		else
		if (nScreenLayout == 16)
			changeSplits(16);
	}
	nScreenLayout = nLayout;
	eval("document.m" + nScreenLayout + "W.src = btn" + nScreenLayout + "W1d.src");
	if (nLayout == 1)
		changeSplits(1);
	else
	if (nLayout == 4)
		changeSplits(4);
	else
	if (nLayout == 9)
		changeSplits(9);
	else
	if (nLayout == 16)
		changeSplits(16);
}

function LoadButtonPicture()
{
	var i;
	for (i=1; i<=16; i++){
		eval('btnCam'+i+'n = new Image()');
		eval('btnCam'+i+'n.src = "image/c'+i+'.gif"');	
		eval('btnCam'+i+'d = new Image()');
		eval('btnCam'+i+'d.src = "image/c'+i+'-b.gif"');	
		eval('btnPTZ'+i+'n = new Image()');
		eval('btnPTZ'+i+'n.src = "image/ptz'+i+'.gif"');	
		eval('btnPTZ'+i+'d = new Image()');
		eval('btnPTZ'+i+'d.src = "image/ptz'+i+'-b.gif"');	
	}
	btnConnect1n	= new Image();
	btnConnect1d	= new Image(); 
	btnLoopPage1n	= new Image();
	btnLoopPage1d	= new Image(); 
	btnVoice1n		= new Image();
	btnVoice1d		= new Image(); 
	btnAudio1n		= new Image();
	btnAudio1d		= new Image(); 
	btnRec1n		= new Image();
	btnRec1d		= new Image(); 
	btn1W1n			= new Image();
	btn1W1d			= new Image(); 
	btn4W1n			= new Image();
	btn4W1d			= new Image(); 
	btn9W1n			= new Image();
	btn9W1d			= new Image(); 
	btn16W1n		= new Image();
	btn16W1d		= new Image(); 
	btnXHPn		  = new Image(); 
	btnXHPd		  = new Image(); 
	btnXHP1n		  = new Image(); 
	btnXHP1d		  = new Image(); 
	btnXHPn.src = "image/web-p.gif"; 
	btnXHPd.src = "image/web-p-b.gif"; 
	btnXHP1n.src = "image/web-p1.gif"; 
	btnXHP1d.src = "image/web-p1-b.gif"; 
	btnConnect1n.src = "image/connect.gif"; 
	btnConnect1d.src = "image/connect-b.gif";
	btnLoopPage1n.src = "image/web-32.gif"; 
	btnLoopPage1d.src = "image/web-32-b.gif";
	btnVoice1n.src = "image/micro2.gif"; 
	btnVoice1d.src = "image/micro2-b.gif";
	btnAudio1n.src = "image/web-voice.gif"; 
	btnAudio1d.src = "image/web-voice-b.gif";
	btnRec1n.src = "image/record.gif"; 
	btnRec1d.src = "image/record-b.gif";
	btn1W1n.src			= "image/web-1w.gif";
	btn1W1d	.src		= "image/web-1w-b.gif"; 
	btn4W1n.src			= "image/web-4w.gif";
	btn4W1d.src			= "image/web-4w-b.gif"; 
	btn9W1n.src			= "image/web-9w.gif";
	btn9W1d.src			= "image/web-9w-b.gif"; 
	btn16W1n.src		= "image/web-16w.gif";
	btn16W1d.src		= "image/web-16w-b.gif"; 
}

function BigScreen()
{
	SetscreenLayout(1);
}

function onNextPage() 
{
//	if (bConnect == 0) {
		//Halert(504);
//		return;
//	}	
	nextPage(0);
}

function onClickCam(strBtnName, strCamName, nCamNo) 
{
	if (strBtnNameSel != ""){ 
		document[strBtnNameSel].src=eval("btnCam" + nCamSelNo +"n.src");
		if (strPTZBtnName != "")
			document[strPTZBtnName].src =  eval("btn" + strPTZBtnName +"n.src");	
	}
	if (strBtnNameSel == strBtnName) {
	    $('#playr'+nCamNo).css("background","#ffffff");
		document.getElementById('flash'+nCamNo).SetVariable("method:hideCaption", "");
		strBtnNameSel = "";
		strCamNameSel = "";
		nCamSelNo	  = 0;
	}
	else{
		if (strBtnNameSel != ""){
			$('#'+strCamNameSel).css("background","#ffffff");
			document.getElementById('flash'+strCamNameSel.substr(5,2)).SetVariable("method:hideCaption", "");
		}
		document[strBtnName].src=eval("btnCam" + nCamNo + "d.src");
		strBtnNameSel = strBtnName;		
		strCamNameSel = strCamName;		
		nCamSelNo     = nCamNo;
		$('#playr'+nCamNo).css("background","red");
		document.getElementById('flash'+nCamNo).SetVariable("method:showCaption", "");
		//document.X4.MaxSelect(nCamNo);
  		if (bAudio == 1){
		    //document.X4.XHdec1.PCall = 0;
  		    //if (document.X4[strCamNameSel].Play > 0) {
				//document.X4[strCamNameSel].Command = "SoundOnOff " + ShiftN(document.X4[strCamNameSel].Camera);
				//setTimeout('newAudio("'+strCamNameSel+'")',1000);
			//}
  		}
	}
	if (strBtnNameSel != ""){ 
		//if (document.X4[strCamNameSel].RecordOn == 1)
			//document.mRec.src = btnRec1d.src;	
		//else
			//document.mRec.src = btnRec1n.src;	
	}
}	

function loopPage()
{
	nextPage(0);
	if (ConnectionType == 0 || strType == "DVRWeb")
		loopTimer = setTimeout('loopPage()',nLoopDuration);
	else
		loopTimer = setTimeout('loopPage()',nLoopDuration*2);
}

function onLoopPage() 
{
//	if (bConnect == 0) {
//		Halert(504);
//		return;
//	}

	if (bLoop == 0){
		document.mLoopPage.src =  btnLoopPage1d.src;
   		//document.X4.ClickButton(7,1);
		bLoop = 1;		
		if (ConnectionType == 0 || strType == "DVRWeb")
			loopTimer = setTimeout('loopPage()',nLoopDuration);
		else
			loopTimer = setTimeout('loopPage()',nLoopDuration*2);
	}
	else{
		document.mLoopPage.src =  btnLoopPage1n.src;
		//document.X4.ClickButton(7,0);
		bLoop = 0
		clearTimeout(loopTimer);
	}
}

function InternetConnect(strCam, nCamNo)
{
	isPlaying[strCam.substr(5,2)] = true;
	document.getElementById(strCam).SetVariable("method:setUrl", "http://"+IP+":"+Port+"/C"+nCamNo+'_'+stridpw+".flv");	
    document.getElementById(strCam).SetVariable("method:play", "");
}

function GetCameraSettings(strCam, nCamNo, bSite)
{
	if (stridpw == " ") {
		stridpw = "Uguest_Pguest";
	}	

	if (bSite == 0)  
		Camera = Camera;
	else 
		Camera = nCamNo;
}

function doConnectCam(strCam, nCamNo)
{
	bSuccessed = 1;
	InternetConnect(strCam.replace("playr","flash"), nCamNo);
}

function doDisconnectCam(strCam, nCamNo)
{
	s = strCam.replace("playr","flash");
	i = strCam.substr(5,2);
	if (isPlaying[i]) {
		document.getElementById(s).SetVariable("method:stop", "");
	}
	isPlaying[i] = false;
}

function ltrim(instr){
return instr.replace(/^[\s]*/gi,"");
}

function rtrim(instr){
return instr.replace(/[\s]*$/gi,"");
}

function trim(instr){
instr = ltrim(instr);
instr = rtrim(instr);
return instr;
}


function askUP()
{
	var theDialog = $('<div><label>Username</label><br /><input type="text" id="username" value="" class="text ui-widget-content ui-corner-all" /><br /><br /><label>Password</label><br /><input type="password" id="password" value="" class="text ui-widget-content ui-corner-all" /><br /><input id="gcheck" type="checkbox" />Guest Login<br /><br /><br /><select id="band"><option value=18082>High Speed(18082)</option><option value=18083>Low Speed(18083)</option></select>	</div>');
	
    if (navigator.appName != "Microsoft Internet Explorer")
	    h = 290;
	else
		h = '100%';
	theDialog.dialog({
		autoOpen: false,
		title: 'Login',
		modal: true,
		width: 210,
		height: h,
		closeOnEscape: true,
		clsoeText: 'show',
		buttons: {
			"OK": function() {
				stridpw = 'U'+trim($('#username').val())+'_P'+trim($('#password').val());
				stridpw1= trim($('#username').val())+' '+trim($('#password').val());
				if ($('#gcheck').attr("checked")) {
					stridpw = "Uguest_Pguest";
					stridpw1= "guest guesr";
				}
				else
				if (stridpw == "U_P") {
					stridpw = "Uguest_Pguest";
					stridpw1= "guest guesr";
				}
				else
				if (stridpw.indexOf('U_P') >= 0)
					return;
				Port = $('#band').val();	
				if (Port == 18082) {
					if (portsAry[1] > 0)
						Port = portsAry[1];
				}
				else
				if (Port == 18083) {
					if (portsAry[2] > 0)
						Port = portsAry[2];
				}
				$(this).dialog("close");
				IP = window.location.host.split(':')[0];
				cmdServer.SetVariable("method:commandConnect", IP+":"+Port);
				doConnectSite();
				bConnect = 1;
				document.mConnect.src = btnConnect1d.src;
				$(this).remove();
			}
		}
	});
	theDialog.dialog('open');
}

function doConnectSite()
{
	var strCam, i;
	for (i=1; i<=16; i++){
		strCam = 'flash' + i;
		GetCameraSettings(strCam, i, 1);
		doConnectCam(strCam, i);
	}
	bConnect = 1;
}

function onConnectSite()
{
	var i, strCam;
	if (bConnect == 0){
		if (strType == "DVRWeb"){
			IP = window.location.host;
			askUP();	
		}	
	}
	else{		
		if (bLoop == 1){
		    onLoopPage();
		}
		document.mConnect.src = btnConnect1n.src
		for (i=1; i<=16; i++){
			strCam = "flash" + i;
			doDisconnectCam(strCam, i);
		}
	 	bConnect = 0;
	}
} 

$(window).load(function(){
	loadScript('ports.js', 'portsstr', portsLoaded);
	LoadButtonPicture();
	calcMax();
	SetscreenLayout(4);
	InitWebcam();
    cmdServer = document.getElementById('flash1');
});

$(window).resize(function(){
	calcMax();
	resizeSplits(csplits);
});

var myListener = new Object();
myListener.onInit = function(i)
{ 		
};

myListener.onConnect = function(i)
{
	if (i > 16) return;
	if (i < 1)  return;
	isPlaying[i] = true;
	bConnect = 1;
  	document.mConnect.src = btnConnect1d.src;
};

myListener.onClick = function(i)
{
	var strBtnName, strCameName;
	strBtnName = "mbtnCam"+i;
	strCamName = "playr"+i;
	onClickCam(strBtnName, strCamName, i); 
};

$(document).ready(function () {
}); 

</SCRIPT>
<script type="text/javascript" event="FSCommand(command,args)" for="flash1">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash2">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash3">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash4">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash5">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash6">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash7">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash8">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash9">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash10">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash11">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash12">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash13">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash14">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash15">eval(args);</script>
<script type="text/javascript" event="FSCommand(command,args)" for="flash16">eval(args);</script>
</head>
<body bgcolor="#DCDCDC" leftmargin="0" topmargin="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" id="wrap" overflow="auto">
  <tr>
    <td id="pool" colspan="2" rowspan="2" align="center" width="100%" height="100%">
<div id="pooldiv" align="center" width="100%" height="100%">
<div class="box" id="playr0" width=0 height=0>
	<object class="flash" id="flash0" type="application/x-shockwave-flash" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="AllowScriptAccess" value="always" />
	<param name="wmode" value="transparent" />
	<param name="FlashVars" value="listener=myListener_0&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr1">
	<object class="flash" id="flash1" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="AllowScriptAccess" value="always" />
	<param name="wmode" value="transparent" />
	<param name="FlashVars" value="listener=myListener_1&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr2">
	<object class="flash" id="flash2" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="AllowScriptAccess" value="always" />
	<param name="wmode" value="transparent" />
	<param name="FlashVars" value="listener=myListener_2&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr3">
	<object class="flash" id="flash3" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="AllowScriptAccess" value="always" />
	<param name="wmode" value="transparent" />
	<param name="FlashVars" value="listener=myListener_3&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr4">
	<object class="flash" id="flash4" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_4&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr5">
	<object class="flash" id="flash5" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_5&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr6">
	<object class="flash" id="flash6" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_6&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr7">
	<object class="flash" id="flash7" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_7&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr8">
	<object class="flash" id="flash8" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_8&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr9">
	<object class="flash" id="flash9" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_9&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr10">
	<object class="flash" id="flash10" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_10&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr11">
	<object class="flash" id="flash11" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_11&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr12">
	<object class="flash" id="flash12" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_12&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr13">
	<object class="flash" id="flash13" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_13&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr14">
	<object class="flash" id="flash14" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_14&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr15">
	<object class="flash" id="flash15" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_15&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="box" id="playr16">
	<object class="flash" id="flash16" type="application/x-shockwave-flash" data="xhd.swf">
	<param name="movie" value="xhd.swf" />
	<param name="wmode" value="transparent" />
	<param name="AllowScriptAccess" value="always" />
	<param name="FlashVars" value="listener=myListener_16&amp;useHandCursor=0&amp;bgcolor=f0f0f0&amp;buffer=5" />
	</object>
</div>
<div class="boxNull" id="playr17">
</div>
<div class="boxNull" id="playr18">
</div>
</div>
	</td>
    <td id="td13" background="image/right_panel_bg.gif" width="117" align="center" valign="top">

	<img src="image/20pix.gif" width="117" height="10"><br>
	<img src="image/logo.gif" width="81" height="48"><br><br>	
    <img name="mbtnCam1" src="image/c1.gif" width="41" height="21" border="0" onClick="onClickCam('mbtnCam1', 'playr1', 1)"> 
    <img name="mbtnCam2" src="image/c2.gif" width="39" height="21" border="0" onClick="onClickCam('mbtnCam2', 'playr2', 2)"><br>
	<img name="mbtnCam3" src="image/c3.gif" width="41" height="24" border="0" onClick="onClickCam('mbtnCam3', 'playr3', 3)">
	<img name="mbtnCam4" src="image/c4.gif" width="39" height="24" border="0" onClick="onClickCam('mbtnCam4', 'playr4', 4)"><br>
	<img name="mbtnCam5" src="image/c5.gif" width="41" height="21" border="0" onClick="onClickCam('mbtnCam5', 'playr5', 5)"> 
	<img name="mbtnCam6" src="image/c6.gif" width="39" height="21" border="0" onClick="onClickCam('mbtnCam6', 'playr6', 6)"><br>
	<img name="mbtnCam7" src="image/c7.gif" width="41" height="24" border="0" onClick="onClickCam('mbtnCam7', 'playr7', 7)">
	<img name="mbtnCam8" src="image/c8.gif" width="39" height="24" border="0" onClick="onClickCam('mbtnCam8', 'playr8', 8)"><br>
	<img name="mbtnCam9" src="image/c9.gif" width="41" height="21" border="0" onClick="onClickCam('mbtnCam9', 'playr9', 9)"> 
	<img name="mbtnCam10" src="image/c10.gif" width="39" height="21" border="0" onClick="onClickCam('mbtnCam10', 'playr10', 10)"><br>
	<img name="mbtnCam11" src="image/c11.gif" width="41" height="24" border="0" onClick="onClickCam('mbtnCam11', 'playr11', 11)">
	<img name="mbtnCam12" src="image/c12.gif" width="39" height="24" border="0" onClick="onClickCam('mbtnCam12', 'playr12', 12)"><br>
	<img name="mbtnCam13" src="image/c13.gif" width="41" height="21" border="0" onClick="onClickCam('mbtnCam13', 'playr13', 13)"> 
	<img name="mbtnCam14" src="image/c14.gif" width="39" height="21" border="0" onClick="onClickCam('mbtnCam14', 'playr14', 14)"><br>
	<img name="mbtnCam15" src="image/c15.gif" width="41" height="24" border="0" onClick="onClickCam('mbtnCam15', 'playr15', 15)"> 
	<img name="mbtnCam16" src="image/c16.gif" width="39" height="24" border="0" onClick="onClickCam('mbtnCam16', 'playr16', 16)"><br>

	</td>
  </tr>
  <tr>
    <td id="td23" align="center" valign="bottom" background="image/right_panel_bg.gif">

	<table width="93" border="0" cellpadding="0" cellspacing="0">
	<tr valign="top"> 
		<td width="34" height="25"><img src="image/ptz1a.gif" width="34" height="34"></td>
		<td width="10" height="25"><img name="PTZ1" border="0" src="image/ptz1.gif" width="25" height="34" onMouseDown="onPTZMouseDown('PTZ1','up')" onMouseUp="onPTZMouseUp()"></td>
		<td height="25"><img src="image/ptz1b.gif" width="34" height="34"></td>
	</tr>
	<tr valign="top"> 
		<td width="34"><img name="PTZ3" border="0" src="image/ptz3.gif" width="34" height="23" onMouseDown="onPTZMouseDown('PTZ3','left')" onMouseUp="onPTZMouseUp()"></td>
		<td width="10"><img name="PTZ5" border="0" src="image/ptz5.gif" width="25" height="23" onClick="onPTZ('PTZ5','stop')"></td>
		<td><img name="PTZ4" border="0" src="image/ptz4.gif" width="34" height="23" onMouseDown="onPTZMouseDown('PTZ4','right')" onMouseUp="onPTZMouseUp()"></td>
	</tr>
	<tr valign="top"> 
		<td width="34"><img src="image/ptz1c.gif" width="34" height="30"></td>
		<td width="10"><img name="PTZ2" border="0" src="image/ptz2.gif" width="25" height="30" onMouseDown="onPTZMouseDown('PTZ2','down')" onMouseUp="onPTZMouseUp()"></td>
		<td><img src="image/ptz1d.gif" width="34" height="30"></td>
	</tr>
	<tr valign="top"> 
		<td width="34"><img name="PTZ9" border="0" src="image/ptz9.gif" width="34" height="21" onClick="onPTZ('PTZ9','preset1')"></td>
		<td rowspan="4"><img name="PTZ6" border="0" src="image/ptz6.gif" width="25" height="36" onMouseDown="onPTZMouseDown('PTZ6','zoomin')" onMouseUp="onPTZMouseUp()"><br>
		<img name="PTZ7" border="0" src="image/ptz7.gif" width="25" height="16" onClick="onPTZ('PTZ7','zoomstop')"><br>
		<img name="PTZ8" border="0" src="image/ptz8.gif" width="25" height="32" onMouseDown="onPTZMouseDown('PTZ8','zoomout')" onMouseUp="onPTZMouseUp()"></td>
		<td><img name="PTZ13" border="0" src="image/ptz13.gif" width="34" height="21" onClick="onPTZ('PTZ13','preset5')"></td>
	</tr>
	<tr valign="top"> 
		<td width="34"><img name="PTZ10" border="0" src="image/ptz10.gif" width="34" height="21" onClick="onPTZ('PTZ10','preset2')"></td>
		<td><img name="PTZ14" border="0" src="image/ptz14.gif" width="34" height="21" onClick="onPTZ('PTZ14','preset6')" ></td>
	</tr>
	<tr valign="top"> 
		<td width="34"><img name="PTZ11" border="0" src="image/ptz11.gif" width="34" height="21" onClick="onPTZ('PTZ11','preset3')"></td>
		<td><img name="PTZ15" border="0" src="image/ptz15.gif" width="34" height="21"  onClick="onPTZ('PTZ15','preset7')"></td>
	</tr>
	<tr valign="top"> 
		<td width="34"><img name="PTZ12" border="0" src="image/ptz12.gif" width="34" height="21" onClick="onPTZ('PTZ12','preset4')" ></td>
		<td><img name="PTZ16" border="0" src="image/ptz16.gif" width="34" height="21" onClick="onPTZ('PTZ16','preset8')" ></td>
	</tr>
	<tr valign="top"> 
		<td colspan="3"><img src="image/ptz-d.gif" width="93" height="6"></td>
	</tr>
	
	</table>			  
	<table width="90" border="0" cellspacing="0" cellpadding="0">
	<tr align="left" valign="bottom" height="20">
    <td background="image/right_panel_bg.gif" height="20" align="left" valign="top"><td>
	</tr>
	<tr align="center" valign="bottom"> 
		<td height="25"> <img name="mConnectCamera" src="image/webcam.gif" width="40" height="20" border="0" onClick="onConnectCam()"> 
		<img name="mDisconnectCamera" src="image/webcam-no.gif" width="40" height="20" border="0" onClick="onDisconnectCam()"></td>
	</tr>
	</table>
	<br>
	</td>
  </tr>
  <tr>
    <td height="50" align="center" valign="middle" id="td31"> 

	<img src="image/20pix.gif" width="10" height="20"><img name="m1W" border="0" src="image/web-1w.gif" width="40" height="40" onClick="BigScreen()"><img src="image/20pix.gif" width="15" height="20"><img name="m4W" border="0" src="image/web-4w.gif" width="40" height="40" onClick="SetscreenLayout(4)"><img src="image/20pix.gif" width="15" height="20"><img name="m9W" border="0" src="image/web-9w.gif" width="40" height="40" onClick="SetscreenLayout(9)" ><img src="image/20pix.gif" width="15" height="20"><img name="m16W" border="0" src="image/web-16w.gif" width="40" height="40" onClick="SetscreenLayout(16)"><img src="image/20pix.gif" width="15" height="20"><img name="mPage" border="0" src="image/web-3.gif" width="40" height="40" onClick="onNextPage()"><img src="image/20pix.gif" width="15" height="20"><img name="mLoopPage" border="0" src="image/web-32.gif" width="40" height="40" onClick="onLoopPage()"><img src="image/20pix.gif" width="15" height="20"><img src="image/20pix.gif" width="25" height="20">

	</td>
    <td align="right" valign="middle" id="td32"> 

	<img src="image/20pix.gif" width="5" height="20" border="0"><img src="image/20pix.gif" width="5" height="20" border="0"><img src="image/20pix.gif" width="5" height="20" border="0">

	</td>
    <td align="center" valign="top" background="image/right_panel_bg.gif" id="td33">
	<img name="mConnect" src="image/connect.gif" width="50" height="50" border="0" onClick="onConnectSite()"> <br>	
	</td>
  </tr>
</table>
</body>
</html>
